<template>
  <view class="h-12 bg-white border-bottom">
      <view class="px-4 h-full flex items-center justify-between">
        <view>粉丝群描述</view>
        <input type="text" class="flex-1 h-full ml-auto text-right pl-4" v-model="fanInfo.desc" placeholder-class="plcg" placeholder="请输入粉丝群描述">
      </view>
  </view>

  <view class="h-12 bg-white border-bottom">
    <view class="px-4 h-full flex items-center justify-between" @click="openRechargePop">
      <view>用户充值类型</view>
      <view class="flex items-center">
        <text class="mr-2 text-sm">{{ sureConfirmType == 20 ? '累积充值' : '单笔充值' }}</text>
        <image class="w-4 h-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </view>

  <view class="h-12 bg-white border-bottom" @click="openIntervalPop">
    <view class="px-4 h-full flex items-center justify-between">
      <view>充值金额区间</view>
      <view class="flex items-center">
        <text class="mr-2">{{ fanInfo.recharge_min_rand }} ~ {{ fanInfo.recharge_max_rand }}</text>
        <image class="w-4 h-4" src="@/static/image/rt.png"></image>
      </view>

    </view>
  </view>

  <view class="h-12 bg-white border-bottom" @click="uploadEwm">
    <view class="px-4 h-full flex items-center justify-between">
      <view>玩家群二维码</view>
      <!--<image :src="ewmUrl"></image>-->
      <view class="flex items-center">
        <image class="w-8 h-8 mr-2" :src="ewmUrl" @click.stop="previewImage([ewmUrl])" v-if="ewmUrl"></image>
        <image class="w-4 h-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </view>

  <view class="h-12 bg-white border-bottom">
    <view class="px-4 h-full flex items-center justify-between">
      <view>微信号</view>
      <input v-model="fanInfo.wechat_no" type="text" class="flex-1 h-full ml-auto text-right pl-4" placeholder-class="plcg" placeholder="请输入微信号">
    </view>
  </view>

  <view class="mt-4 h-12 bg-white border-bottom" @click="uploadHomeImg">
    <view class="px-4 h-full flex items-center justify-between">
      <view>首页弹窗预览</view>
      <view class="flex items-center">
        <image class="w-8 h-8 mr-2" :src="homeImg" @click.stop="previewImage([homeImg])" v-if="homeImg"></image>
        <image class="w-4 h-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </view>

  <view class="h-12 bg-white border-bottom" @click="uploadPerson">
    <view class="px-4 h-full flex items-center justify-between">
      <view>个人中心弹窗预览</view>
      <view class="flex items-center">
        <image class="w-8 h-8 mr-2" :src="personImg" @click.stop="previewImage([personImg])" v-if="personImg"></image>
        <image class="w-4 h-4" src="@/static/image/rt.png"></image>
      </view>
    </view>
  </view>

  <view class="flex items-center justify-center w-80 h-10 m-auto mt-6 bg-indigo-500 rounded-3xl text-white" @click="saveFanInfo">保存</view>

  <!--用户充值类型-popup-->
  <uni-popup ref="rechargeRef" type="bottom" border-radius="10px 10px 0 0" @maskClick="closeRePop">
    <view class="recharge-popup">
      <view class="text-center">请选择用户充值类型</view>
      <view class="px-20">
        <radio-group @change="changeRechargeVal">
          <label key="1" class="w-full flex items-center mt-4">
            <radio value="20" :checked="rechargeVale == '20'"></radio>
            <text class="text-sm">累积充值</text>
          </label>
          <label key="2" class="w-full flex items-center mt-4">
            <radio value="10" :checked="rechargeVale == '10'"></radio>
            <text class="text-sm">单笔充值</text>
          </label>
        </radio-group>
      </view>
      <view class="px-20 mt-4">
        <view @click="confirmRecharge" class="h-8 flex items-center justify-center rounded-3xl bg-indigo-500 text-white">确定</view>
      </view>

    </view>
  </uni-popup>

  <!--充值金额区间-popup-->
  <uni-popup ref="intervalRef" type="center" :mask-click="false">
      <view class="h-40 rounded-xl bg-white p-4 box-border" style="width: 480rpx">
        <view class="text-center text-sm">请输入充值金额 (a&lt;= x &lt;= b)</view>
        <input type="number" class="interval-ipt" placeholder="起点金额" placeholder-class="plcg" v-model="startMoney">
        <input type="number" class="interval-ipt" placeholder="截止金额" placeholder-class="plcg" v-model="endMoney">

        <view class="mt-3 flex gap-4">
          <view @click="closeIntervalPop" class="text-xs h-6 flex-1 bg-gray-200 rounded-2xl flex items-center justify-center">取消</view>
          <view @click="confirmIntervalPop" class="text-xs text-white h-6 flex-1 bg-indigo-500 rounded-2xl flex items-center justify-center">确定</view>
        </view>
      </view>
  </uni-popup>

</template>

<script setup lang="ts">
    import { ref, nextTick } from 'vue'
    import { addUserFansApi } from '@/api/fan/index'
    import { fileUpload } from '@/api/public/index'
    import { uiwu } from "@/api/interface/interface";
    import { throttle } from '@/api/common'
    import  { onLoad } from '@dcloudio/uni-app'

    /** 金额弹窗的值 **/
    const startMoney = ref('')
    const endMoney = ref('')

    const fanInfo = ref({
      desc: '',
      recharge_type: '',
      recharge_min_rand: 0,
      recharge_max_rand: 0,
      qrcode: '', // 二维码图片
      wechat_no: '',
      home_preview: '', // 首页预览图
      center_preview: '', // 个人中心预览图
    })

    /** 用户充值类型 **/
    const rechargeVale = ref<string>('20')
    const rechargeRef = ref()
    const openRechargePop = () => {
      rechargeRef.value.open()
    }
    const changeRechargeVal = (e) => {
      rechargeVale.value = String(e.detail.value)
    }
    const sureConfirmType = ref<number>(20)
    /** 确定用户充值类型-btn **/
    const confirmRecharge = () => {
      sureConfirmType.value = Number(rechargeVale.value)
      rechargeRef.value.close()
    }
    const closeRePop = () => {
      rechargeVale.value = String(sureConfirmType.value)
    }

    /** 充值金额区间 **/
    const intervalRef = ref()
    const openIntervalPop = () => {
      intervalRef.value.open()
    }

    /** 充值金额区间弹窗-取消btn **/
    const closeIntervalPop = () => {
      startMoney.value = ''
      endMoney.value = ''
      intervalRef.value.close()
    }

    /** 充值金额区间弹窗-确定btn **/
    const confirmIntervalPop = () => {
      if( Number(startMoney.value) > Number(endMoney.value) ) {
        uiwu.toast('金额条件输入有误, 请重新输入')
        return
      }
      fanInfo.value.recharge_min_rand = Number( startMoney.value )
      fanInfo.value.recharge_max_rand = Number( endMoney.value )
      closeIntervalPop()
    }

    /** 玩家群二维码 **/
    const ewmUrl = ref<string>('')
    const uploadEwm = () => {
      uni.chooseImage({
        success: async (chooseImageRes) => {
          uni.showLoading({ title: '正在上传...' })
          const data = await fileUpload({
            name: 'file',
            filePath: chooseImageRes.tempFilePaths[0],
          })

          if(data.status != 200) {
            uiwu.toast(data.msg)
          }else {
            nextTick(() => {
              ewmUrl.value = data.data.url
            })
            fanInfo.value.qrcode = data.data.url
            uiwu.toast(data.msg)
          }
          uni.hideLoading()
        }
      })
    }
    /** 预览图片**/
    const previewImage = (imageArray) => {
      console.log('imageArray===', imageArray)
      uni.previewImage({
        urls: imageArray
      })
    }

    /** 首页弹窗图片上传 **/
    const homeImg = ref('')
    const uploadHomeImg = () => {
      uni.chooseImage({
        success: async (chooseImageRes) => {
          uni.showLoading({ title: '正在上传...' })
          const data = await fileUpload({
            name: 'file',
            filePath: chooseImageRes.tempFilePaths[0]
          })

          if(data.status != 200) {
            uiwu.toast(data.msg)
          }else {
            nextTick(() => {
              homeImg.value = data.data.url
            })
            fanInfo.value.home_preview = data.data.url
            uiwu.toast(data.msg)
          }
          uni.hideLoading()

        }
      })
    }

    /** 个人中心弹窗图片上传 **/
    const personImg = ref('')
    const uploadPerson = () => {
      uni.chooseImage({
        success: async (chooseImageRes) => {
          uni.showLoading({ title: '正在上传...' })
          const data = await fileUpload({
            name: 'file',
            filePath: chooseImageRes.tempFilePaths[0]
          })

          if(data.status != 200) {
            uiwu.toast(data.msg)
          }else {
            nextTick(() => {
              personImg.value = data.data.url
            })
            fanInfo.value.center_preview = data.data.url
            uiwu.toast(data.msg)
          }
          uni.hideLoading()

        }
      })
    }

    /** 保存-btn **/
    /**
     * async() => {
     *
     *       // console.log('xxxx', fanInfo.value)
     *       const res = await addUserFansApi(fanInfo.value)
     *
     *       if(res.status == 200) {
     *
     *
     *         setTimeout(() => {
     *           uni.navigateBack({
     *             delta: 1,
     *             success() {
     *               uni.$emit('updateList', { status: 1 })
     *             }
     *           })
     *         }, 3000)
     *
     *       }
     *     } **/


    const saveFanInfo = throttle(async () => {
      const res = await addUserFansApi(fanInfo.value)
      if(res.status == 200) {
        uni.$emit('update', { status: 1 })

        uiwu.toast('保存成功')

        setTimeout(() => {
          uni.navigateBack({ delta: 1 })
        }, 3000)
      }
    }, 3000)



    onLoad(() => {
      console.log('FANonLoad')
    })

</script>

<style scoped lang="scss">
page {
  height: 100vh;
  background: #f5f5f5;
}

.plcg {
  font-size: 24rpx;
}

.recharge-popup {
  height: 360rpx;
  padding-top: 60rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
}

.interval-ipt {
  height: 50rpx;
  margin-top: 20rpx;
  padding: 0 40rpx;
  border: 2rpx solid #f5f5f5;
  border-radius: 10rpx;
  font-size: 24rpx;
}

.cancle {
  border: 2rpx solid #ebebeb;
}

.packetBtn {
  left: 50%;
  transform: translateX(-50%);
}
</style>
